<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #id_div_01 {
      /*height: 100vh;*/
      /*overflow: auto;*/
    }

    #id_table_01 {
      width: 100%;
    }

    #id_thead_01 {
      width: 100%;
      background-color: #000;
      color: #fff;
    }

    .table-container {
      width: 100%;
      height: 1000px;
      overflow: auto;
    }

    /* 首列固定 */
    .table-container thead tr > th:first-child,
    .table-container tbody tr > td:first-child {
      position: sticky;
      left: 0;
      z-index: 1;
    }

    /* 表头固定 */
    .table-container thead tr > th {
      position: sticky;
      top: 0;
      z-index: 2;
    }

    /* 表头首列强制最顶层 */
    .table-container thead tr > th:first-child {
      z-index: 3;
    }
  </style>
</head>
<body>

<h1>sticky实现吸顶效果</h1>
<hr>
<br>
<br>

<div class="table-container">
  <table id="id_table_01">
    <thead id="id_thead_01">
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
    </thead>

    <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    </tbody>

  </table>

</div>

<p>
  参考：
  https://www.tangshuang.net/7739.html
</p>

</body>
</html>
